<template>
  <el-dialog append-to-body title="操作记录" width="680px" top="10vh" :visible="visible" @close="handleClose">
    <el-form v-loading="loading" class="key-value white-card" label-width="160px">
      <el-form-item label="操作时间：">{{ details.createTime }}</el-form-item>
      <el-form-item label="操作名称：">{{ details.operateName }}</el-form-item>
      <el-form-item label="操作人：">{{ details.processUser || "-" }}</el-form-item>

      <template v-if="details.operateType === '03'">
        <el-form-item label="移交备注："><div v-html="txt2HTML(details.comment)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '04'">
        <el-form-item label="交办备注："><div v-html="txt2HTML(details.comment)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '05'">
        <el-form-item label="取消受理备注："><div v-html="txt2HTML(details.comment)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '06'">
        <el-form-item label="不受理原因：">{{ details.reason }}</el-form-item>
        <el-form-item label="不受理备注："><div v-html="txt2HTML(details.comment)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '08'">
        <el-form-item label="回退原因：">{{ details.reason }}</el-form-item>
        <el-form-item label="回退备注："><div v-html="txt2HTML(details.comment)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '10'">
        <el-form-item label="转移交办原因：">{{ details.reason }}</el-form-item>
        <el-form-item label="转移交办备注："><div v-html="txt2HTML(details.comment)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '22'">
        <el-form-item label="提交终止类型：">{{ details.reason }}</el-form-item>
        <el-form-item label="提交终止备注："><div v-html="txt2HTML(details.comment)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '44'">
        <el-form-item label="修改内容：">{{ details.comment }}</el-form-item>
        <el-form-item label="补正内容："><div v-html="txt2HTML(details.reason)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '19'">
        <el-form-item label="是否公开：">{{ details.other === "Y" ? "是" : "否" }}</el-form-item>
        <el-form-item label="办结理由："><div v-html="txt2HTML(details.comment)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '48'">
        <el-form-item label="是否公开：">{{ details.other === "Y" ? "是" : "否" }}</el-form-item>
        <el-form-item label="终结备注："><div v-html="details.comment"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '14'">
        <el-form-item label="中止总时间：">{{ (Number(details.costTime) * 1000) | timeFormatDHM }}</el-form-item>
      </template>

      <template v-if="details.operateType === '20'">
        <el-form-item label="取消办结备注："><div v-html="txt2HTML(details.comment)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '21'">
        <el-row :gutter="0">
          <el-col :span="9">
            <el-form-item label="整体满意度：">
              <startAppraise :value="details.workOrderAppraise.satisfiedScore" readonly></startAppraise>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="评价内容："><div v-html="txt2HTML(details.workOrderAppraise.comment)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '15'">
        <el-form-item label="延期原因："><div v-html="txt2HTML(details.comment)"></div></el-form-item>
        <el-form-item label="延期备注："><div v-html="txt2HTML(details.reason)"></div></el-form-item>
        <el-form-item label="延期天数：">{{ details.other !== "null" ? details.other : 30 }}天</el-form-item>
        <el-form-item label="是否通过：">{{ details.auditStatus | workOrderProcessAuditStatus }}</el-form-item>
      </template>

      <template v-if="details.operateType === '18'">
        <el-form-item label="退回备注："><div v-html="txt2HTML(details.comment)"></div></el-form-item>
      </template>
      <template v-if="details.operateType === '29'">
        <el-form-item label="撤回原因："><div v-html="txt2HTML(details.reason)"></div></el-form-item>
        <el-form-item label="撤回类型：">{{ details.revokeType }}</el-form-item>
      </template>
      <template v-if="details.operateType === '49'">
        <el-form-item label="终止备注："><div v-html="txt2HTML(details.comment)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '16'">
        <el-form-item label="提交办结类型：">{{ details.reason }}</el-form-item>
        <el-form-item label="提交办结理由："><div v-html="txt2HTML(details.comment)"></div></el-form-item>
        <el-form-item label="结案反馈：">
          {{ details.satisfactionLevel | workOrderAtisFactionLevel }}
          <!-- {{ details.satisfactionLevel == "satisfaction" ? "满意" : details.satisfactionLevel == "common" ? "一般" : details.satisfactionLevel == "noSatisfaction" ? "不满意" : "" }} -->
        </el-form-item>
        <el-table v-if="details.reportList && details.reportList.length" :data="details.reportList" size="mini">
          <el-table-column prop="fileName" label="结案报告"></el-table-column>
          <el-table-column label="文件名称">
            <template slot-scope="{ row }">{{ row.fileName | filename }}</template>
          </el-table-column>
          <el-table-column label="文件格式">
            <template slot-scope="{ row }">{{ row.fileName | extensionName }}</template>
          </el-table-column>
          <el-table-column label="操作" width="150px" align="center">
            <template slot-scope="{ row }">
              <el-button @click="handleDownload(row)" type="primary" plain size="mini">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-table v-if="details.attachmentList && details.attachmentList.length" :data="details.attachmentList" size="mini" style="margin-top: 10px">
          <el-table-column prop="fileName" label="附件"></el-table-column>
          <el-table-column label="文件名称">
            <template slot-scope="{ row }">{{ row.fileName | filename }}</template>
          </el-table-column>
          <el-table-column label="文件格式">
            <template slot-scope="{ row }">{{ row.fileName | extensionName }}</template>
          </el-table-column>
          <el-table-column label="操作" width="150px" align="center">
            <template slot-scope="{ row }">
              <el-button @click="handleDownload(row)" type="primary" plain size="mini">查看</el-button>
            </template>
          </el-table-column>
        </el-table>

        <template v-if="details.payedAmount">
          <el-form-item label="已支付金额：">{{ details.payedAmount | unitMoney }}</el-form-item>
          <el-form-item label="已制定支付计划金额：" label-width="154px">{{ details.makePayPlanAmount | unitMoney }}</el-form-item>
          <el-form-item label="支付备注："><div v-html="txt2HTML(details.payNote)"></div></el-form-item>
        </template>
      </template>

      <template v-if="details.operateType === '13'">
        <el-form-item label="中止原因：">{{ details.reason }}</el-form-item>
        <el-form-item label="中止备注："><div v-html="txt2HTML(details.comment)"></div></el-form-item>
        <el-form-item label="审批状态：">{{ details.auditStatus | workOrderProcessAuditStatus }}</el-form-item>

        <el-table v-if="details.jsonAttachment && details.jsonAttachment.length" :data="details.jsonAttachment" size="mini">
          <el-table-column prop="fileName" label="附件"></el-table-column>
          <el-table-column label="文件名称">
            <template slot-scope="{ row }">{{ row.fileName | filename }}</template>
          </el-table-column>
          <el-table-column label="文件格式">
            <template slot-scope="{ row }">{{ row.fileName | extensionName }}</template>
          </el-table-column>
          <el-table-column label="操作" width="150px" align="center">
            <template slot-scope="{ row }">
              <el-button @click="handleDownload(row)" type="primary" plain size="mini">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <template v-if="details.operateType === '25'">
        <el-form-item label="截止时间：">{{ details.lastCompleteTime }}</el-form-item>
        <el-form-item label="补正要求："><div v-html="txt2HTML(details.correctRequirement)"></div></el-form-item>
      </template>

      <template v-if="['32', '37'].includes(details.operateType)">
        <el-form-item label="跟踪内容："><div v-html="txt2HTML(details.reason)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '33' || details.operateType === '35'">
        <el-form-item label="关闭内容："><div v-html="txt2HTML(details.reason)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '34'">
        <el-form-item label="异常原因："><div v-html="txt2HTML(details.reason)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '36'">
        <el-form-item label="实际还款时间："><div v-html="txt2HTML(details.reason)"></div></el-form-item>
      </template>

      <template v-if="details.operateType === '39'">
        <el-form-item label="直办备注：">
          <div v-html="txt2HTML(details.comment || '-')"></div>
        </el-form-item>
      </template>
      <template v-if="details.operateType === '40'">
        <el-form-item label="转办备注：">
          <div v-html="txt2HTML(details.comment || '-')"></div>
        </el-form-item>
      </template>
      <template v-if="details.operateType === '41'">
        <el-form-item label="交办备注：">
          <div v-html="txt2HTML(details.comment || '-')"></div>
        </el-form-item>
      </template>
      <template v-if="details.operateType === '47'">
        <el-form-item label="指定办理备注：">
          <div v-html="txt2HTML(details.comment || '-')"></div>
        </el-form-item>
      </template>
      <template v-if="details.operateType === '55'">
        <el-form-item label="受理备注：">
          <div>{{ details.comment }}</div>
        </el-form-item>
        <el-form-item label="受理通知书：">
          <upload-preview :file-list="details.receiveAttachmentList" btnType="text"></upload-preview>
        </el-form-item>
      </template>
      <template v-if="details.operateType === '56'">
        <el-form-item label="确认退回理由：">
          <div>{{ details.reason }}</div>
        </el-form-item>
        <el-form-item label="确认退回报告：">
          <upload-preview :file-list="details.receiveAttachmentList" btnType="text"></upload-preview>
        </el-form-item>
      </template>

      <el-form-item v-if="details.workOrderAuditList && details.workOrderAuditList.length" label="审批流程记录：">
        <auditProcessRecord :records="details.workOrderAuditList" size="mini" style="margin-top: 5px"></auditProcessRecord>
      </el-form-item>
    </el-form>

    <div class="split"></div>

    <div class="dialog-footer-btn">
      <el-button @click="handleClose" type="primary" plain>关闭</el-button>
    </div>
  </el-dialog>
</template>
<script>
import uploadPreview from "@/components/uploadInput/uploadPreview.vue";
import auditProcessRecord from "@/views/workOrder/components/auditProcessRecord";
import startAppraise from "@/components/startAppraise/index.vue";
import * as mixins from "@/utils/mixins";
import * as workOrderApi from "@/api/workOrder/index";
import { extensionName, filename, timeFormatDHM, txt2HTML, workOrderProcessAuditStatus, unitMoney, workOrderAtisFactionLevel } from "@/utils/filters";

export default {
  name: "processDetailsDialog",
  mixins: [mixins.dialog, mixins.upload],
  components: {
    auditProcessRecord,
    startAppraise,
    uploadPreview,
  },
  filters: { extensionName, filename, timeFormatDHM, workOrderProcessAuditStatus, unitMoney, workOrderAtisFactionLevel },
  props: ["visible", "id", "type", "records"],
  data() {
    return {
      loading: true,
      details: {
        workOrderAuditList: [],
      },
      appraiseForm: {
        comment: "",
        processAvailableScore: 0,
        processEffectiveScore: 0,
        satisfiedScore: 0,
      },
    };
  },

  methods: {
    txt2HTML,
    show() {
      this.getProcessDetails();
    },
    hide() {
      this.details = {};
    },
    getProcessDetails() {
      this.loading = true;
      workOrderApi[this.type]
        .processDetails(this.id)
        .then((res) => {
          this.details = res.result;
          console.log(this.details, "this.details");
        })
        .finally(() => (this.loading = false));
    },
  },
};
</script>

<style scoped></style>
